<template>
  <div class="hanmerimg">
    <div class="hammerimgin">
      <img id="hit"  :src="imgsrc" @load="loadimg"/>
    </div> 
  </div>
</template>

<script>

export default {
  name: 'hammerimg',
  props : [],
  data () {
    return {//http://img2.imgtn.bdimg.com/it/u=2921957326,1386932132&fm=26&gp=0.jpg
      imgsrc:'http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg'
    }
  },
  components: {
   
  },
  methods : {
     init(){
        var _this = this;

        var reqAnimationFrame = (function () {

            return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {

                window.setTimeout(callback, 1000 / 60);

            };

        })();



        var el = document.querySelector("#hit");

        var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);

        var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);

        var innerw = window.innerWidth;

        var innerh = window.innerHeight;

        var ticking = false;

        var transform;

        var timer;



        var mc = new Hammer.Manager(el);



        mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));



        mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));

        mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));

        mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);



        mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));

        mc.add(new Hammer.Tap());



        mc.on("panstart panmove", onPan);
        //旋转
        //mc.on("rotatestart rotatemove", onRotate);
        //两个手指缩放
        mc.on("pinchstart pinchmove", onPinch);
        //当滑动时上下左右3d偏移
        //mc.on("swipe", onSwipe);
        //单机
        mc.on("tap", onTap);
        //双击
        mc.on("doubletap", onDoubleTap);



        mc.on("hammer.input", function(ev) {

            if(ev.isFinal) {

                resetElement();

            }

        });




        function initstate(){
            transform = {

                translate: { x: START_X, y: START_Y },

                scale: 1,

                angle: 0,

                rx: 0,

                ry: 0,

                rz: 0

            };

            requestElementUpdate();
        }

        function resetElement() {

            el.className = 'animate';

            transform = {

                translate: { x: START_X, y: START_Y },

                scale: 1,

                angle: 0,

                rx: 0,

                ry: 0,

                rz: 0

            };



            requestElementUpdate();


        }



        function updateElementTransform() {

            var value = [

                        'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',

                        'scale(' + transform.scale + ', ' + transform.scale + ')'

            ];



            value = value.join(" ");

            el.textContent = value;

            el.style.webkitTransform = value;

            el.style.mozTransform = value;

            el.style.transform = value;

            ticking = false;

        }



        function requestElementUpdate() {

            if(!ticking) {
                reqAnimationFrame(updateElementTransform);

                ticking = true;

            }

        }



        function logEvent(str) {

            //log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);

        }



        function onPan(ev) {

                el.className = '';

                transform.translate = {

                    x: START_X + ev.deltaX,

                    y: START_Y + ev.deltaY

                };



                requestElementUpdate();

                logEvent(ev.type);

        }



        var initScale = 1;

        function onPinch(ev) {
            if(transform.scale>=0.8&&transform.scale<=2){
                if(transform.scale>1){
                  var centerx = ev.center.x;
                  var centery = ev.center.y;
                  var perx = parseFloat(parseFloat((centerx/innerw)*100).toFixed(2));
                  var pery = parseFloat(parseFloat((centery/innerh)*100).toFixed(2));
                  $('#hit').css('transform-origin',perx+'%'+' '+pery+'%');
                }else{
                  $('#hit').css('transform-origin','50% 50%');
                }
                if(ev.type == 'pinchstart') {

                    initScale = transform.scale || 1;

                }


                el.className = '';

                transform.scale = initScale * ev.scale;



                requestElementUpdate();

                logEvent(ev.type);

            }
            
        }



        var initAngle = 0;

        function onRotate(ev) {

            if(ev.type == 'rotatestart') {

                initAngle = transform.angle || 0;

            }



            el.className = '';

            transform.rz = 1;

            transform.angle = initAngle + ev.rotation;

            requestElementUpdate();

            logEvent(ev.type);

        }



        function onSwipe(ev) {

            var angle = 50;

            transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0;

            transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0;

            transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle;



            clearTimeout(timer);

            timer = setTimeout(function () {

                resetElement();

            }, 300);

            requestElementUpdate();

            logEvent(ev.type);

        }



        function onTap(ev) {

            transform.rx = 1;

            transform.angle = 25;



            clearTimeout(timer);

            timer = setTimeout(function () {

                resetElement();

            }, 200);

            requestElementUpdate();

            logEvent(ev.type);
            //隐藏
            
        }



        function onDoubleTap(ev) {

            /*transform.rx = 1;

            transform.angle = 80;*/



            clearTimeout(timer);

            timer = setTimeout(function () {

                resetElement();

            }, 500);

            requestElementUpdate();

            logEvent(ev.type);

        }
        initstate();
     }
  },
  mounted(){
      hit.onload = ()=> {
          this.init();
      }
  }
}

</script>

<style lang="scss" scoped>
  #hit[lazy=loading]{
    width: 40px;
    height: 300px;
    margin: auto;
  }
  #hit{
    margin-top:0!important;
  }
  .animate {
      -webkit-transition: all .3s;

      -moz-transition: all .3s;

      transition: all .3s;
  }
  .hanmerimg{
    text-align: left;
    background-color:#000000; 
    position:absolute;
    width:100%;
    height:100%;
  }
  .hammerimgin{
    width:100%;
    height:100%;
    position:absolute;
    overflow: hidden;
  }
</style>
